<template>
    <div v-if="model" class="editViews">
        <div style="margin-bottom:2.778vw;"><nav-bar ref="navbar"></nav-bar></div>
        <div class="uploadfile">
            <div class="uploadimg"><van-uploader preview-size="100vw" :after-read="afterRead" /></div>
            <edit-banner left="头像">
                <template v-slot:right>
                    <img :src="model.img"   alt="" v-if="model.img">
                    <img src="@/assets/default_img.jpg"   alt="" v-else>
                </template>
            </edit-banner>
        </div>

        <edit-banner left="昵称" @bannerClick="NameClick">
            <template v-slot:right>
                <a href="javascript:;">{{model.username}}</a>
            </template>
        </edit-banner>

        <edit-banner left="账号">
            <template v-slot:right>
                <a href="javascript:;" >{{model.name}}</a>
            </template>
        </edit-banner>

        <edit-banner left="性别" @bannerClick="GenderClick">
            <template v-slot:right>
                <a href="javascript:;" >{{model.gender ? '男' : '女'}}</a>
            </template>
        </edit-banner>

        <edit-banner left="个签" @bannerClick="TextClick">
            <template v-slot:right>
                <a href="javascript:;" >{{model.user_desc}}</a>
            </template>
        </edit-banner>

        <div class="editback" @click="$router.back()">返回个人中心</div>
        <div class="editback" @click="LoginOut">退出登录</div>

        <van-dialog :show="nameshow"
        title="昵称"
        show-cancel-button
        @confirm="confirmClick"
        @cancel="NameCancel"
        >
            <van-field v-model="content"  autofocus />
        </van-dialog>

        <van-dialog
           :show="textshow"
           title="个签"
           show-cancel-button
           @confirm="textareaClick"
           @cancel="TextCancel"
        >
            <van-field v-model="content" type="textarea" autofocus />
        </van-dialog>

         <van-action-sheet :show="gendershow" cancel-text="取消" :actions="actions" @cancel="GenderCancel" @select="onSelect" />
    </div>
  </template>

<script>
import NavBar from './components/Navbar.vue'
import editBanner from './components/editBanner.vue'
import axios from 'axios'
export default {
  data () {
    return {
      model: {},
      nameshow: false,
      textshow: false,
      gendershow: false,
      content: '',
      actions: [
        { name: '男', val: 1 },
        { name: '女', val: 0 }
      ]
    }
  },
  components: {
    NavBar,
    editBanner
  },
  methods: {
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    async LoginOut () {
      localStorage.removeItem('token')
      localStorage.removeItem('id')
      this.model = {}
      this.$router.back()
    },
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    async NameClick () {
      this.nameshow = true
    },
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    async NameCancel () {
      this.nameshow = false
      this.content = ''
    },
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    async TextClick () {
      this.textshow = true
    },
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    async TextCancel () {
      this.textshow = false
      this.content = ''
    },
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    async GenderClick () {
      this.gendershow = true
    },
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    async GenderCancel () {
      this.gendershow = false
    },
    // 进入组件调取数据渲染页面
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    async selectUser () {
      const res = await axios.get('http://localhost:3000/user/' + localStorage.getItem('id'))
      this.model = res.data.data[0]
      console.log(res.data.data[0].gender)
    },
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    async afterRead (file) {
      // console.log(file.content)
      const fromdata = new FormData()
      fromdata.append('file', file.content)
      var obj = {
        id: localStorage.getItem('id'),
        img: file.content
      }
      const res = await axios.post('http://localhost:3000/user/img/' + localStorage.getItem('id'), obj)
      console.log(res)
      this.model.img = res.data.data.img
      this.UserUpdate()
      this.$refs.navbar.NavInit()
    },
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    async UserUpdate () {
      const res = await axios.post('http://localhost:3000/user/update/' + localStorage.getItem('id'), this.model)
      if (res.data.code === 200) {
        this.$msg.fail('修改成功')
      }
    },
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    confirmClick () {
      this.model.username = this.content
      this.UserUpdate()
      this.content = ''
      this.nameshow = false
    },
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    textareaClick () {
      this.model.user_desc = this.content
      this.UserUpdate()
      this.content = ''
      this.textshow = false
    },
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    onSelect (data) {
      this.model.gender = data.val
      this.UserUpdate()
      this.gendershow = false
    }
  },
  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
  created () {
    this.selectUser()
  }
}
</script>

  <style scoped lang="less">
  .editViews a{
      color: #333;
  }
  .editViews img{
      height: 12.778vw;
      width: 12.778vw;
      border-radius: 50%;
  }
  .uploadfile{
      overflow: hidden;
      position: relative;
      .uploadimg{
          opacity: 0;
          position: absolute;
      }
  }
  .editback{
      margin-top: 5.556vw;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      color: #999;
      padding: 4.167vw 0;
      font-size: 4vw;
  }
  </style>
